<template>
  <d2-container better-scroll>
    <div flex="">
      <el-tree :load="treeLoad"
               node-key="id"
               ref="tree"
               class="tree"
               lazy>
        <div slot-scope="{ node, data }"
             style="width:100%"
             v-bind:class="{active:data.id===treeSel.id}"
             @click="treeClick(data)">
          <span>{{ data.cname }}</span>
          <el-dropdown trigger="click"
                       class="d2-fr d2-mr-10">
            <i class="el-icon-more"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="treeappend(node,data,0)">新增同级</el-dropdown-item>
              <el-dropdown-item @click.native="treeappend(node,data,1)">新增下级</el-dropdown-item>
              <el-dropdown-item @click.native="treeedit(node,data)">修改</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-tree>

      <avue-crud flex-box="1"
                 :data="curdData"
                 :option="curdOption"
                 ref="curd"
                 @row-save="curdSave"
                 @row-update="curdUpdate"
                 @before-open="curdBeforeOpen"></avue-crud>
    </div>

    <el-dialog title="添加"
               :visible.sync="treeForm"
               :append-to-body="true"
               :modal="false">
      <avue-form v-model="treeObj"
                 :option="treeFormOp"
                 @submit="treeSave">
      </avue-form>
    </el-dialog>
  </d2-container>
</template>

<script>
export default {
  data () {
    return {
      treeObj: {},
      units: {},
      treeData: [],
      treeForm: false,
      treeFormOp: {
        labelWidth: 100,
        column: [{
          'label': '名称',
          'prop': 'cname',
          'type': 'input'
        }]
      },
      treeSel: {},
      curdData: [],
      curdOption: {
        'rowKey': 'id',
        'dialogClickModal': false,
        column: [
          {
            'label': '姓名',
            'prop': 'username',
            'type': 'input',
            search: true,
            rules: [{
              required: true,
              message: '请输入姓名',
              trigger: 'blur'
            }]
          },
          {
            'label': '用户名',
            'prop': 'loginname',
            'type': 'input'
          },
          {
            'label': '全拼',
            'prop': 'py',
            'type': 'input',
            'readonly': true
          },
          {
            'label': '简拼',
            'prop': 'jp',
            'type': 'input',
            'readonly': true
          },
          {
            'label': '是否禁用',
            'prop': 'disabled',
            'type': 'switch',
            valueDefault: false
          },
          {
            'label': '手机号码',
            'prop': 'mobile',
            'type': 'input'
          }
        ]
      }
    }
  },
  created () {
  },
  methods: {
    treeLoad (node, resolve) {
      if (node.level === 0) {
        this.$post('/sys/unituser/unitList').then(r => {
          this.units = r.list
          return resolve([{ id: '0', cname: '系统' }])
        })
      }
      if (node.level > 0) {
        var t = []
        this.units.forEach(r => {
          if (r.pid === node.data.id) {
            t.push(r)
          }
        })
        return resolve(t)
      }
    },
    treeClick (d) {
      this.treeSel = d
      this.getcurddata({ unitid: d.id })
    },
    treeappend (node, data, t) {
      var n
      if (t === 0) {
        if (data.id === '0') {
          this.$message.error('不能添加与系统同级')
          return ''
        } else {
          n = { cname: '', pid: data.pid }
        }
      } else {
        n = { cname: '', pid: data.id }
      }
      this.treeSel = data
      this.treeObj = n
      this.treeForm = true
    },
    treeedit (node, data) {
      if (data.id === '0') {
        this.$message.error('不能修改系统内置')
        return ''
      } else {
        this.treeObj = data
        this.treeForm = true
      }
    },
    treeSave () {
      var cb
      if (this.treeObj.id) {
        cb = obj => {
          this.$refs.tree.remove(obj.id)
          this.$refs.tree.append(obj, obj.pid)
        }
      } else {
        cb = obj => {
          this.$refs.tree.append(obj, obj.pid)
        }
      }
      this.$post('/sys/unituser/unitSave', this.treeObj).then(r => {
        if (r.state === 'ok') {
          this.$message.success('保存成功')
          cb(r.list)
          this.treeForm = false
        } else {
          this.$message.error('保存失败')
        }
      })
    },
    getcurddata (obj) {
      this.$post('/sys/unituser/userList', obj).then(r => {
        this.curdData = r.list
      })
    },
    curdSave (row, done, loading) {
      this.userSave(row, done)
    },
    curdUpdate (row, index, done, loading) {
      this.userSave(row, done)
    },
    userSave (row, done) {
      row.unitid = this.treeSel.id
      this.$post('/sys/unituser/userSave', row).then(r => {
        if (r.state === 'ok') {
          done()
          this.getcurddata({ unitid: this.treeSel.id })
        }
      })
    },
    curdBeforeOpen (done, type) {
      console.log(type)
      if (this.treeSel.id) {
        this.$message.error('请选择部门')
      } else {
        done()
      }
    }
  }
}
</script>
<style scoped>
.tree {
  width: 300px;
  margin-right: 5px;
}
.active {
  background-color: darkgrey;
}
</style>
